<template>
  <div>
    <el-dialog
      title="分组管理"
      :visible.sync="show"
      width="70%"
      :before-close="handleClose">
      <div>
        <div class="button-row">
          <el-button @click="addNewGroup" type="primary">添加</el-button>
          <el-button @click="mutiDelHandler" type="danger">删除</el-button>
          <el-button @click="handleClose">返回</el-button>
        </div>
        <CommonTable
          v-if="show"
          class="commonTable"
          ref="groupTableRef"
          :is-selection="true"
          :is-show-index="false"
          :is-has-opera="true"
          :t-column-data="groupListCol"
          :remote-api="getGroupList"
          :query-params="searchObj"
          :is-reserve-select="true"
          @changeRow="changeRowMethods"
          operating-width="180px"
        >
          <template slot="operate" slot-scope="scope" class="operate-btn">
            <el-button type="text" @click="editGroup(scope.row)">编辑</el-button>
            <el-button type="text" class="del-button" @click="delGroup(scope.row)">删除</el-button>
          </template>
        </CommonTable>
      </div>
      <span slot="footer" class="dialog-footer">
<!--        <el-button @click="handleClose">取 消</el-button>-->
        <!--        <el-button type="primary" @click="confirmUploadFile">确 定</el-button>-->
      </span>
    </el-dialog>

    <el-dialog
      title="分组管理"
      :visible.sync="isShowGroupForm"
      width="40%"
      :before-close="handleGroupFormClose">
      <el-form @submit.native.prevent ref="form" :model="groupForm" label-width="110px">
        <el-form-item label="分组名称">
          <el-input @keyup.native.enter="confirmSubmitGroup" v-model="groupForm.groupName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleGroupFormClose">取 消</el-button>
        <el-button type="primary" @click="confirmSubmitGroup">确 定</el-button>
      </span>
    </el-dialog>

    <WarnPanelDialog
      :statusProp="statusProp"
      warnContent="是否该删除分组"
      @confirmHandler="confirmDelMethods"
      @cancelHandler="cancelHandler"
    ></WarnPanelDialog>
  </div>
</template>

<script>
import CommonTable from "@/components/Table/commonTable";
import {groupListCol} from './tableCol/groupListCol'
import * as service from "./service";

export default {
  name: "index",
  components: {
    CommonTable
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      statusProp: false,
      groupForm: {
        groupName: ''
      },
      isShowGroupForm: false,
      groupListCol,
      searchObj: {
        page: 1,
        pageSize: 20,
        mediaType: this.mapCurrentMediaType()
      },
      getGroupList: service.getFileGroupList,
      clickCache: {},
      mutiDelList: []
    }
  },
  watch: {
    show(val) {
      if(val) {
        this.$nextTick(() => {
          this.getList()
        })
      }
    }
  },
  methods: {
    mapCurrentMediaType() {
      //1视频 2图片 3文档 4应用程序 5网页应用 6电脑桌面 7其他 8节目 9流媒体
      const suffixFileMapStr = {
        '视频': 1,
        '图片': 2,
        '文档': 3,
        '应用程序': 4,
        '网页应用': 5,
        '电脑桌面': 6,
        '其他': 7,
        '节目': 8,
        '流媒体': 9,
      }
      const key = this.$route.meta.title
      return suffixFileMapStr[key]
    },
    cancelHandler() {
      this.statusProp = false
      this.clickCache = {}
    },
    changeRowMethods(row) {
      this.mutiDelList = [...row]
    },
    confirmDelMethods() {
      if(this.mutiDelList.length > 0) {
        const params = {
          ids: []
        }
        this.mutiDelList.forEach((item) => {
          params.ids.push(item.id)
        })
        service.delGroup(params).then(() => {
          this.$message.success('删除成功')
          this.getList()
          this.statusProp = false
          this.mutiDelList = []
        })
      } else {
        const params = {
          ids: [this.clickCache.id]
        }
        service.delGroup(params).then(() => {
          this.$message.success('删除成功')
          this.getList()
          this.statusProp = false
          this.clickCache = {}
        })
      }
    },
    delGroup(row) {
      this.clickCache = Object.assign({}, row)
      this.statusProp = true
    },
    getList() {
      const params = Object.assign({}, this.searchObj)
      this.$refs.groupTableRef.queryData(params)
    },
    confirmSubmitGroup() {
      if(!this.groupForm.groupName) {
        this.$message.error('请输入分组名称')
        return
      }
      const params = {
        ...this.groupForm,
        mediaType: this.mapCurrentMediaType()
      }

      if(params.groupId) {
        params.id = params.groupId
      }
      delete params.groupId
      service.saveGroup(params).then((res) => {
        this.$message.success('创建成功')
        this.handleGroupFormClose()
        this.getList()
      })
    },
    mutiDelHandler() {
      if(this.mutiDelList.length === 0) {
        this.$message.error('请选择删除的分组')
        return
      }
      this.statusProp = true
    },
    handleClose() {
      this.isShowGroupForm = false
      this.$emit('on-close')
    },
    handleGroupFormClose() {
      this.isShowGroupForm = false
      this.groupForm.groupName = ''
    },
    addNewGroup() {
      this.isShowGroupForm = true
    },
    editGroup(row) {
      this.groupForm.groupName = row.group_name
      this.groupForm.groupId = row.id
      this.isShowGroupForm = true
    },
  }
}
</script>

<style scoped>
  .button-row{
    margin-bottom: 10px;
    width: 100%;
    text-align: right;
  }
</style>
